<template>
  <div v-if="visible" class="modal-overlay" @click.self="close">
    <div class="modal-content">
      <span class="close-btn" @click="close">&times;</span>
      <h3>新增收货地址</h3>

      <form @submit.prevent="saveAddress">
        <div class="form-group">
          <label>区域</label>
          <input v-model="form.addressArea" type="text" required>
        </div>

        <div class="form-group">
          <label>详细地址</label>
          <input v-model="form.addressDetail" type="text" required>
        </div>

        <div class="form-group">
          <label>联系人</label>
          <input v-model="form.addressLinkman" type="text" required>
        </div>

        <div class="form-group">
          <label>联系电话</label>
          <input v-model="form.addressPhone" type="tel" required>
        </div>

        <button type="submit" class="btn-submit">保存地址</button>
      </form>
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';
import { BASE_URL } from "@/util/Config.js";
import { useUserStore } from '@/stores/user';

export default {
  props: {
    visible: Boolean
  },
  emits: ['close', 'saved'],
  setup(props, { emit }) {
    const userStore = useUserStore();
    console.log(userStore.userInfo.userName)
    console.log(userStore.userInfo.userPhone)
    const form = ref({
      addressArea: '',
      addressDetail: '',
      addressLinkman: userStore.userInfo?.userName || '', // 初始化联系人
      addressPhone: userStore.userInfo?.userPhone || ''     // 初始化电话
    });

    // 监听modal打开状态
    watch(() => props.visible, (newVal) => {
      if(newVal) {
        // 每次打开弹窗时更新联系信息
        form.value.addressLinkman = userStore.userInfo?.userName || '';
        form.value.addressPhone = userStore.userInfo?.userPhone || '';
      }
    });

    const close = () => emit('close');

    const saveAddress = async () => {
      try {
        const response = await fetch(BASE_URL + '/my/addAddresses', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            userId: userStore.userInfo?.userId,
            ...form.value
          })
        });

        if (response.ok) {
          emit('saved');
          form.value = {
            addressArea: '',
            addressDetail: '',
            addressLinkman: userStore.userInfo?.userName || '', // 重置时保留联系信息
            addressPhone: userStore.userInfo?.userPhone || ''
          };
        }
      } catch (error) {
        console.error('保存地址失败:', error);
      }
    };

    return {
      form,
      close,
      saveAddress
    };
  }
}
</script>

<style scoped>
/* 原有样式保持不变 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.modal-content {
  background: white;
  padding: 25px;
  border-radius: 8px;
  width: 500px;
  max-width: 90%;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: #999;
}

.close-btn:hover {
  color: #333;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.btn-submit {
  background-color: #2ecc71;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  margin-top: 10px;
}

.btn-submit:hover {
  background-color: #27ae60;
}
</style>